<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Refresh" content="3">
<link rel="stylesheet" type="text/css" href="../CSS/one.css">
</head>
    <style>
		h3.hidden1{
			visibility: hidden;
		}
		h3.hidden2{
			display:none;
		}
		span{
			display:block;/*把内联元素编程块级元素*/
		}
	</style>
<body>
	<h2>盒子模型演示</h2>
	<br>
	<p class="d">CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距、边框、填充，和实际内容</p>
	<p class="e">无边框</p>
	<p class="f">虚线边框</p>
	<p class="g">虚线边框</p>
	<p class="h">实线边框</p>
	<p class="i">双边框</p>
	<p class="j">凹槽边框</p>
	<p class="k">垄状边框</p>
	<p class="l">嵌入边框</p>
	<p class="m">外凸边框</p>
	<p class="n">隐藏边框</p>
	<p class="o">混合边框</p>
	<br>
	<div class="c">这里是盒子内的实际内容，有25px内间距、25px外间距、25px绿色边框</div>
	<h2>这是一个可见标题</h2>
	<h3 class="hidden1">这是一个隐藏的标题，但是会保留原有空间</h3>
	<p>注意，实例中的隐藏标题仍然占用空间</p>
    <h3 class="hidden2">这也是一个隐藏的标题，但是不会保留原有空间</h3>
	<p>上面的标签隐藏了</p>
	<br>
	<span>把这个改为块级元素，可以看出这个标签已经转行了</span>
</html>
